<!-- pages/goods/goods.vue -->
<template>
	<view class="container">
		<!-- 标题 -->
		<!-- <view class="header ">
			<image src="/static/index_slices/back_left.png" mode="" @click="toBack"></image>
			<text>商品详情</text>

		</view> -->
		<!-- 广告 -->
		<view class="banner-warpper">
			<u-swiper :list="swiper" keyName="image" height="760rpx" indicator indicatorMode="dot"
				imgMode="aspectFill"></u-swiper>
			<view class="content">
				<view class="title">{{ infos?.title }}</view>
				<view class="foot flex-between">
					<view class="price-wrapper">
						<text class="current">¥{{ infos?.price }}</text>
						<text class="original">{{ infos?.oldPrice }}</text>
					</view>
					<view class="count-wrapper">
						<text>{{infos?.count}}</text>
					</view>
				</view>

			</view>
		</view>
		<!-- 商品详情 -->
		<view class="details">
			<h4>商品详情</h4>
			<view v-html="infos?.content" style="margin: 40rpx"></view>
		</view>
		<!-- 底部 -->
		<view class="tabbar flex-between">
			<view class="to-index" @click="toIndex">
				<image src="/static/index_slices/index.png" mode=""></image>
				<text>首页</text>
			</view>
			<button @click="isBuy=true">立即兑换</button>
		</view>
		<!-- 购买弹框 -->
		<view class="buy" v-if="isBuy">
			<view class="buy-content">
				<!-- 商品信息 -->
				<view class="close" @click="isBuy=false">
					<up-icon name="close-circle" size="33rpx " color="#AAADB6"></up-icon>
				</view>
				<view class="goods ">
					<image src="/static/index_slices/goods2.png" mode="widthFix"></image>
					<view class="goods-detail">
						<h4>{{infos?.title}}</h4>
						<view class="num">
							<text class="num">{{infos?.goods_sku}}</text>
						</view>
						<view class="flex-between">
							<view class="price-box">
								<text>￥</text>
								<text class="price">{{infos?.price}}</text>
							</view>

						</view>
					</view>
				</view>
				<view class="type tabs">
					<text class="title">规格</text>
					<view class="ul flex-between">
						<view class="li active">{{infos?.goods_sku}}</view>
					</view>
				</view>
				<view class="num flex-between">
					<text class="title">数量</text>
					<view class=" flex-between">
						<view class="circle left" @click="minus">
							-
						</view>
						<text>{{num}}</text>
						<view class="circle right" @click="add">
							+
						</view>
					</view>
				</view>
				<button @click="query">确认</button>
			</view>
		</view>

	</view>

</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const id = ref(0)
	onLoad((options)=>{
		
		id.value = options.id;
		getData()
	})

	const swiper = ref();
	const infos = ref();
	const getData = () => {
		uni.$api.common.getGoodDetail({
			'goods_id': id.value
		}).then(res => {
			if (res.code == 200) {
				swiper.value = res.data.goods_images
				infos.value = {
					title: res.data.goods_name,
					price: res.data.goods_price.toFixed(1),
					oldPrice: `￥${res.data.market_price.toFixed(1)}`,
					count: `已兑${res.data.sales.toFixed(0)}`,
					content: res.data.content,
					goods_sku: res.data.goods_sku
				}
			}
		})
	}
	// 跳转首页
	const toIndex = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	// 返回上一页
	const toBack = () => {
		uni.navigateBack({
			delta: 1 // 返回层数（默认1，表示返回上一页）
		});
	}
	const typeIndex = ref(0)
	const typeSelect = (index) => {
		typeIndex.value = index
	}

	// 规格
	const specsList = reactive([{
			type: '默认'
		}
	])
	const specsIndex = ref(0)
	const specsSelect = (index) => {
		specsIndex.value = index
	}
	// 数量
	const num = ref(1)
	const minus = () => {
		if (num.value > 1) num.value--
	}
	const add = () => {
		num.value++
	}
	// 购买弹框
	const isBuy = ref(false)

	// 确认
	const query = () => {
		const info = ref({
			goods_id: id,
			order_num: num
		})
		uni.$api.order.confirmOrder(info.value).then(res => {
			if(res.code == 200){
				uni.setStorageSync('goods_detail',JSON.stringify(res.data))
				uni.navigateTo({
					url: '/orderPages/pages/order/confirm-order'
				})
			}
		})
		
		// isBuy.value = false
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 120rpx;
		// background: url(/static/index_slices/底.png) no-repeat;
		background-size: 100% auto;

		// 标题
		.header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			padding: 30rpx;
			color: #fff;
			z-index: 999;
			text-align: center;

			image {
				position: absolute;
				left: 30rpx;
				top: 30rpx;
				width: 20rpx;
				height: 38rpx;
			}
		}

		// 轮播
		.banner-warpper {
			background-color: #fff;
			margin-bottom: 20rpx;

			image {
				width: 100%;
			}
		}

		.content {
			padding: 37rpx 30rpx;

			.title {
				font-size: 32rpx;
				color: #151F38;
				font-weight: bold;
			}

			.foot {
				padding-top: 21rpx;
			}

			.price-wrapper {

				.current {
					font-weight: bold;
					color: #DD3A22;
					font-size: 31rpx;
					margin-right: 15rpx;
				}

				.original {
					color: #9DA4B1;
					font-size: 24rpx;
					text-decoration: line-through;
					font-weight: bold;
				}
			}

			.count-wrapper {
				font-size: 24rpx;
				color: #9DA4B1;
			}
		}

		// 商品详情
		.details {
			text-align: center;
			background-color: #fff;
			padding-top: 32rpx;
			padding-bottom: 40rpx;
			margin-bottom: 62rpx;

			h4 {
				position: relative;
				color: #08132A;
				font-size: 30rpx;

				&::before {
					content: '';
					display: inline-block;
					height: 2rpx;
					width: 44rpx;
					background-color: #EBECF0;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translateX(200%);
				}

				&::after {
					content: '';
					display: inline-block;
					height: 2rpx;
					width: 44rpx;
					background-color: #EBECF0;
					position: absolute;
					top: 50%;
					right: 50%;
					transform: translateX(-200%);
				}
			}

			image {
				width: 100%;
				margin-top: 120rpx;
			}
		}

		// 底部
		.tabbar {
			position: fixed;
			bottom: -1rpx;
			left: 0;
			right: 0;
			z-index: 999;

			padding-left: 59rpx;
			padding-right: 30rpx;
			background-color: #fff;
			height: 160rpx;

			.to-index {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #575D69;
				font-size: 21rpx;

				image {
					width: 31rpx;
					height: 34rpx;
					margin-top: 13rpx;
				}
			}

			button {
				padding: 0;
				margin: 0;
				width: 560rpx;
				height: 85rpx;
				color: #fff;
				border-radius: 42.5rem;
				background: linear-gradient(to right, #FF5A55, #FD3832);
			}
		}

		.buy {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.7);
			z-index: 9999;

			.buy-content {
				background-color: #fff;
				border-radius: 31rpx 31rpx 0 0;
				padding: 41rpx 30rpx 89rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				font-size: 26rpx;
				color: #0D182E;

				.close {
					position: absolute;
					right: 31rpx;
					top: 21rpx;

				}

				//  商品信息
				.goods {
					background-color: #fff;
					border-radius: 16rpx;
					font-size: 22rpx;
					color: #999;
					display: flex;
					margin-bottom: 66rpx;

					image {
						width: 160rpx;
						border-radius: 10rpx;
						margin-right: 22rpx;
					}

					.goods-detail {

						h4 {
							width: 373rpx;
							font-size: 26rpx;
							color: #151F38;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.num {
							padding-top: 22rpx;
							margin-bottom: 34rpx;
						}

						.price-box {
							font-size: 20rpx;
							color: #FF3A3A;
							font-weight: bold;
						}

						.price {
							font-size: 26rpx
						}
					}
				}

				// #endregions
				.title {
					color: #697080;
					margin-bottom: 23rpx;
				}

				.ul {
					flex-wrap: wrap;

					.li {
						width: 208rpx;
						height: 60rpx;
						line-height: 60rpx;
						background-color: #F6F6F9;
						border-radius: 4rpx;
						text-align: center;
						margin-right: 21rpx;
						margin: 22rpx 21rpx 30rpx 0;

						&.active {
							background-color: #FFEBEA;
							color: #FD3832;
						}
					}
				}

				.num.flex-between {
					margin-top: 60rpx;
					margin-bottom: 92rpx;

					.circle {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						text-align: center;
						line-height: 40rpx;
					}

					.left {
						border: 1px solid #FD3832;
						color: #FD3832;
						margin-right: 22rpx;
					}

					.right {
						background-color: #FD3832;
						color: #fff;
						margin-left: 22rpx;
					}
				}

				button {
					width: 690rpx;
					height: 88rpx;
					border-radius: 44rpx;
					color: #fff;
					background: linear-gradient(to right, #FF5A55, #FD3832);
				}
			}
		}

	}
</style>